<template>
	<view>
		<view class="login-form">
			<input type="text" class="input-row" v-model="account" maxlength="11" placeholder="请输入账号" />
			<input type="password" class="input-row" v-model="password" maxlength="11" placeholder="请输入密码" />
			<button type="bytton" class="btn login-btn" @click="login()">登录</button>
			<view class="bot flex-box">
				<text hover-class="none" class="sign" url="">立即注册</text>
				<text hover-class="none" class="forget" url="">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
import { apiUserDetail } from '../../../apis';
	// import {
	// 	apiLogin
	// } from '../../../apis/index.js';
	
	export default {
		data() {
			return {
				account: '',
				password: ''
			}
		},
		methods: {
			...mapMutations(['storeLogin']),
			login() {
				uni.switchTab({
					url: '/pages/find/find',

				});
				if (!this.account) {
					this.alert('请输入账号！')
					return false
				}
				if (!this.password) {
					this.alertModal('请输入密码!')
					return false
				}
				//去掉左右两边的空格
				const account = this.account.trim()
				const password = this.password.trim()
				//检查密码长度
				if (password.length < 6) {
					this.alert("密码最短为6个字符");
					return false
				}
				
				// 调用接口
				const params = {
					account: 19189655880,
					password: 123456,
				}
				// apiLogin(params).then(res => {
				// 	console.log(res);
				// 	//如果登录失败
				// 	if (res.data.code != 200) {
				// 		this.alert(res.errMsg);
				// 		return false
				// 	}
					// 登陆成功 储存信息跳转页面
					const temp = {
						
					}
					this.storeLogin(temp)
				// })
			},
			alertModal(msg) {
				uni.showModal({
					content: msg,
					showCancel: false
				})
			},
			alert(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				});
			}
		}
	}
</script>

<style lang="scss">
	.input-row {
		width: 600rpx;
		height: 75rpx;
		margin: 0 auto;
		border: 1px solid #E04B28;
		color: #6c6c6c;
		border-radius: 75rpx;
		padding: 0 50rpx;
		line-height: 75rpx;
		margin-bottom: 45rpx;
		font-size: 26rpx;
	}

	.login-form {
		padding-top: 220rpx;
	}

	.login-btn {
		width: 600rpx;
		height: 75rpx;
		margin: 0 auto;
		border: 1px solid #E04B28;
		border-radius: 75rpx;
		padding: 0 50rpx;
		line-height: 75rpx;
		margin-bottom: 45rpx;
		font-size: 26rpx;
		color: #fff;
		background: #E04B28;
	}

	.bot {
		width: 600rpx;
		padding: 0 17rpx;
		font-size: 26rpx;
		margin: 0 auto;
		justify-content: space-between;
	}

	.sign {
		color: #E04B28;
	}

	.auth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		bottom: 100rpx;
		left: 0;
		width: 100%;

		.auth-image {
			width: 50px;
			height: 50px;
			border: 1px solid #dddddd;
			border-radius: 50px;
			margin: 0 20px;
			background-color: #ffffff;
			overflow: hidden;
		}

		.img {
			width: 30px;
			height: 30px;
			margin: 10px;
		}

		input {
			outline: none;
			border: none;
			list-style: none;
		}
	}

	.log-btn {
		margin: 0;
		padding: 0;
		background: #fff !important;
		height: 48px;

		&::after {
			background-color: transparent;
			margin: 0;
			padding: 0;
			border: 0;
		}
	}
</style>